---
type: integration
title: '@astrojs/vue'
description: "Apprenez à utiliser l'intégration du framework @astrojs/vue pour étendre la prise en charge des composants dans votre projet Astro."
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vue/'
category: renderer
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Cette **[intégration Astro][astro-integration]** permet le rendu côté serveur et l'hydratation côté client pour vos composants [Vue 3](https://vuejs.org/).

## Installation

Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place.

Pour installer `@astrojs/vue`, exécutez ce qui suit depuis le répertoire de votre projet et suivez les instructions :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add vue
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add vue
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add vue
    ```
  </Fragment>
</PackageManagerTabs>

Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous.

### Installation manuelle

Tout d'abord, installez le paquet `@astrojs/vue` :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/vue
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/vue
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/vue
    ```
  </Fragment>
</PackageManagerTabs>


La plupart des gestionnaires de paquets installent également les dépendances associées. Si vous voyez un avertissement "Cannot find package 'vue'" (ou similaire) lorsque vous démarrez Astro, vous devez installer Vue :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install vue
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add vue
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add vue
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier `astro.config.*` en utilisant la propriété `integrations` :

```js ins={2} ins="vue()" title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});
```

## Pour commencer

Pour utiliser votre premier composant Vue dans Astro, consultez notre [documentation sur les frameworks UI][astro-ui-frameworks]. Vous y découvrirez :

* 📦 comment les composants du framework sont chargés,
* 💧 les options d'hydratation côté client, et
* 🤝 les possibilités de mélanger et d'imbriquer les frameworks entre eux

## Dépannage

Pour obtenir de l'aide, consultez le canal `#support` sur [Discord](https://astro.build/chat). Nos sympathiques membres de l'équipe d'assistance sont là pour vous aider !

Vous pouvez également consulter notre [Documentation d'intégration Astro][astro-integration] pour plus d'informations sur les intégrations.

## Contribution

Ce paquet est maintenu par l'équipe Core d'Astro. Vous êtes les bienvenus pour soumettre un problème ou un PR !

[astro-integration]: /fr/guides/integrations-guide/

[astro-ui-frameworks]: /fr/guides/framework-components/#utilisation-des-composants-de-framework

## Options

Cette intégration est alimentée par `@vitejs/plugin-vue`. Pour personnaliser le compilateur Vue, des options peuvent être fournies à l'intégration. Voir la [documentation de `@vitejs/plugin-vue`](https://www.npmjs.com/package/@vitejs/plugin-vue) pour plus de détails.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // traiter toute balise commençant par ion- comme un élément personnalisé
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});
```

### appEntrypoint

Vous pouvez étendre l'instance Vue `app` en fixant l'option `appEntrypoint` à un spécificateur d'importation relatif à la racine (par exemple, `appEntrypoint : "/src/pages/_app"`).

L'exportation par défaut de ce fichier devrait être une fonction qui accepte une instance Vue `App` avant le rendu, permettant l'utilisation de [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html), `app.use`, et d'autres personnalisations pour des cas d'utilisation avancés.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
});
```

```ts title="src/pages/_app.ts"
import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';

export default (app: App) => {
  app.use(i18nPlugin);
};
```

### jsx

Vous pouvez utiliser Vue JSX en définissant `jsx : true`.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ jsx: true })],
});
```

Cela permet d'activer le rendu pour les composants Vue et Vue JSX. Pour personnaliser le compilateur Vue JSX, passez un objet options au lieu d'un booléen. Voir la [documentation `@vitejs/plugin-vue-jsx`](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) pour plus de détails.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      jsx: {
        // traiter toute balise commençant par ion- comme un élément personnalisé
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});
```
